<template>
    <div class="q">
      <div class="e">全部商品></div>
      <div class="w">
        <div class="r">
          <div class="let1">
            <span class="name">分类:</span>
            <div>美食</div>
            <div>美食</div>
            <div>美食</div>
          </div>
          <div class="let2">
            <span class="name">排序</span>
            <div>默认</div>
            <div>价格</div>
            <div class="srk">
              ￥<input type="text" @focus="jujiao" class="inp" v-model="qq" />
              <em>-</em>
              <input type="text" @focus="jujiao" class="inp" v-model="ww" />
            </div>
            <div v-if="isInputShow">
              <el-button @click="queding" :disabled="panduan">确定</el-button>
              <el-button @click="qingkong">清空</el-button>
              <!-- <a href="#">清空</a> -->
            </div>
          </div>
          <div class="let3">
            <div class="mokuai" v-for="(item, i) in list2" :key="i">
              <div class="top">
                <img :src="item.img" />
                <!-- <span>{{item.img}}</span> -->
              </div>
              <div class="button">
                <div class="prdtTags"></div>
                <div>{{ item.name }}</div>
                <div class="color">${{ item.price }}</div>
                <div>
                  <el-button type="warning"
                    ><span style="color: white">加入购物车</span></el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w" style="margin-top: 20px; margin-bottom: 0">
        <div><h2>猜你喜欢</h2></div>
        <div class="cnxh">
          <!-- 轮播图 -->
          <el-carousel :interval="4000" type="card" height="350px">
            <el-carousel-item v-for="item in list1" :key="item">
              <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
              <a href="#/"><img :src="item.img" alt="" /></a>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, computed, onMounted, inject } from "vue";
  import { mapState } from "vuex";
  import axios from "axios";
  export default {
    setup(props) {
      let list2 = ref([]);
      let list1 = ref([]);
      let qq = ref("");
      let ww = ref("");
      let isInputShow = ref(false);
      let panduan = ref(false);
      let list = ref([])
      // 聚焦
      function jujiao() {
        isInputShow.value = true;
        console.log(list);
      }
      // 筛选的新数组
      const qqqq = computed(() => {
        return list1.value.filter(
          (item) => item.price > qq.value && item.price < ww.value
        );
      });
  
      // 确定按钮
      function queding() {
        if (qq.value == "" || ww.value == "") {
          return alert("请输入区间值");
        }
        list2.value = [];
        list2.value = qqqq.value;
        isInputShow.value = false;
      }
      // 清空按钮
      function qingkong() {
        jiekou();
        qq.value = "";
        ww.value = "";
        isInputShow.value = false;
      }
      //获取数据接口
      function jiekou() {
        axios.get("http://localhost:3000/data").then((res) => {
          list1.value = res.data;
          list2.value = res.data;
          // if (list.length > 0) {
          //   return list2.value = list;
          // }else{
          //   return list2.value = res.data;
          // }
         
        });
      }
      // 生命周期函数
      onMounted(() => {
        jiekou();
      });
      return {
        list2,
        list1,
        list,
        qq,
        ww,
        isInputShow,
        panduan,
        jujiao,
        qqqq,
        queding,
        qingkong,
        jiekou,
      };
    },
  };
  </script>
  <style lang="less" scoped>
  .cnxh img {
    width: 100%;
    height: 350px;
  }
  span {
    color: #999;
  }
  .name {
    margin-right: 28px;
  }
  .color {
    color: red;
  }
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .q {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    // padding-top: 50px;
    .e {
      margin: 0 auto;
      width: 1100px;
      height: 50px;
      line-height: 50px;
    }
    .w {
      margin: 0 auto;
      width: 1100px;
      // height: 500px;
      box-sizing: border-box;
      // margin: 20px 30px;
      //内边距
      padding: 30px 40px;
      // padding: 0 0 0 0;
      background-color: #fff;
      .r {
        // margin: 1px 1px 1px 1px;
        // border: 1px solid red;
        // background-color: black;
      }
      .let1 {
        width: 100%;
        height: 50px;
        line-height: 50px;
        // background-color: pink;
        font-size: 14px;
        display: flex;
        border-bottom: 1px dashed #999;
  
        div {
          float: left;
          margin-right: 30px;
          margin-bottom: 16px;
          font-size: 14px;
        }
      }
      .let2 {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #999;
        display: flex;
        font-size: 14px;
        div {
          margin-right: 28px;
        }
        .inp {
          height: 20px;
          width: 40px;
        }
        .srk {
          // position: absolute;
          // display: inline-block;
        }
      }
      .let3 {
        display: flex;
        flex-wrap: wrap;
        margin: 25px auto 0;
        /* 两端对齐 */
        // justify-content: space-between;
        .mokuai {
          padding-left: 11px;
          width: 240px;
  
          .top {
            // margin: 0 auto;
            text-align: center;
          }
          .button {
            // background-color: rgb(87, 93, 93);
            width: 100%;
            height: 100px;
            text-align: center;
            .prdtTags {
              height: 20px;
              font-size: 0;
            }
          }
        }
      }
    }
  }
  </style>